<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航线分布 - 航班数据分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        dark: '#0F172A',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style>
        /* 取消白色背景和阴影 */
        .chart-section {
            padding: 0;
            background: transparent;
            box-shadow: none;
        }
        /* 响应式容器，保持16:9比例，自适应父容器宽度 */
        .chart-container {
            width: 100%;
            /* 高度随容器宽度自适应，保持16:9 */
            aspect-ratio: 16 / 9;
            position: relative;
        }
        /* 覆盖内嵌 div 做全屏定位 */
        .chart-container > div {
            position: absolute !important;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
        }
        /* 修正此处的语法错误 */
        .nav-active {
            background-color: #165DFF;
            color: white !important;
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-primary text-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-plane text-2xl"></i>
                <h1 class="text-xl font-bold">航班数据分析系统</h1>
            </div>
            <div class="hidden md:flex space-x-1">
                <a href="{{ url_for('admin_index' if session.get('role') == 'admin' else 'index') }}"
                    class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">首页</a>
                <a href="{{ url_for('routes') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航线分布</a>
                <a href="{{ url_for('airlines') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航空公司</a>
                <a href="{{ url_for('statistics') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">航班统计</a>
                <a href="{{ url_for('price_revenue') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">票价-收入分析</a>
                <a href="{{ url_for('about') }}" class="px-4 py-2 rounded hover:bg-primary/80 transition-colors">关于系统</a>
            </div>
            <button class="md:hidden text-white focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 模块标题 -->
    <div class="bg-gradient-to-r from-blue-600 to-indigo-700 py-12 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl font-bold mb-4">航线分布分析</h2>
            <p class="max-w-2xl mx-auto">探索全国航线网络分布、top10的繁忙城市对航线和客流量</p>
        </div>
    </div>

    <!-- 图表导航 -->
    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-wrap justify-center gap-2 mb-8">
            <a href="#dynamic-map" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-map mr-2 text-primary"></i>动态航线图
            </a>
            <a href="#busiest-routes" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-bar-chart mr-2 text-secondary"></i>每日航班TOP10
            </a>
            <a href="#heatmap" class="bg-white px-4 py-2 rounded-full shadow hover:bg-gray-100 transition-colors">
                <i class="fa fa-fire mr-2 text-accent"></i>航线客流量热力图
            </a>
        </div>
    </div>

    <!-- 图表区域 -->
    <main class="flex-1 overflow-auto p-6 bg-gray-50">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 auto-rows-min">
            <!-- 动态航线图 -->
            <section id="dynamic-map" class="chart-section col-span-1 lg:col-span-2">
                <div class="flex items-center mb-4">
                    <i class="fa fa-map text-primary text-2xl mr-3"></i>
                    <h3 class="text-xl font-semibold">动态航线图</h3>
                </div>
                <div class="chart-container">
                    {{ flight_map|safe }}
                </div>
                <div class="mt-4 text-gray-600">
                    <p>该图展示了各个城市之间的航线分布情况，红色实心点表示出发城市，红色空心点表示到达城市，红色虚线配上小飞机图标表示航班路线。</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>地图自动轮播展示不同出发城市的航线网络</li>
                        <li>出发城市和到达城市都有清晰的标记</li>
                        <li>点击城市节点可查看详细信息</li>
                        <li>支持缩放和平移操作探索细节</li>
                    </ul>
                </div>
            </section>

            <!-- 最繁忙城市对航线柱状图 -->
            <section id="busiest-routes" class="bg-white rounded-xl shadow-lg p-6 mb-8">
                <div class="flex items-center mb-4">
                    <i class="fa fa-bar-chart text-secondary text-2xl mr-3"></i>
                    <h3 class="text-xl font-semibold">Top 10 最繁忙航线（城市对）</h3>
                </div>
                <div class="chart-container">
                    {{ busiest_routes|safe }}
                </div>
                <div class="mt-4 text-gray-600">
                    <p>该柱状图展示了最繁忙的十条城市对航线，帮助您了解热门城市间航线的航班数量情况。</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>横轴表示城市对航线</li>
                        <li>纵轴表示航班数量</li>
                        <li>柱状颜色采用渐变配色</li>
                        <li>图像优美，直观展示</li>
                    </ul>
                </div>
            </section>

            <!-- 航线客流量热力图 -->
            <section id="heatmap" class="bg-white rounded-xl shadow-lg p-6 mb-8">
                <div class="flex items-center mb-4">
                    <i class="fa fa-fire text-accent text-2xl mr-3"></i>
                    <h3 class="text-xl font-semibold">航线热力图</h3>
                </div>
                <div class="chart-container">
                    {{ heatmap|safe }}
                </div>
                <div class="mt-4 text-gray-600">
                    <p>该热力图展示了航线的繁忙程度分布情况，直观了解繁忙城市的航线客流量。</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li>颜色深浅反映航线繁忙程度，同时也是客流量大小</li>
                        <li>支持缩放和平移操作探索细节</li>
                    </ul>
                </div>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="text-center text-gray-500">
                <p>&copy; 2024 航班数据分析系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 transition-opacity duration-300 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.remove('opacity-0');
            } else {
                backToTopBtn.classList.add('opacity-0');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>